<template>
    <div id="title-wrapper" v-show="this.operationToggle">
        <div class="left">
          <span class="icon-back"></span>
        </div>
        <div class="right">
          <div class="icon-wrapper">
            <span class="icon-cart"></span>
          </div>
          <div class="icon-wrapper">
            <span class="icon-person"></span>
          </div>
          <div class="icon-wrapper">
            <span class="icon-more"></span>
          </div>
        </div>
    </div>
</template>

<script>
   import {mapGetters} from 'vuex';
    export default {
        name: "EbookTitle",
        computed:{
          ...mapGetters(['operationToggle'])
        }
    }
</script>

<style lang="stylus" scoped>
    span[class^='icon-']
        font-size: 0.5rem
        color: #333
    #title-wrapper
         position: absolute
         top: 0
         left: 0
         width: 100%
         height: 1rem
         z-index: 101
         display: flex
         background-color: #fff
         box-shadow 0 5px 5.5px rgba(0,0,0,0.15)
       .left
          flex: 0 0 1.3rem
          display: flex
          justify-content: center
          align-items: center
       .right
          flex: 1
          display: flex
          justify-content flex-end
          .icon-wrapper
            flex 0 0 1.3rem
            display: flex
            justify-content: center
            align-items: center

</style>
